<script setup name="Index" lang="tsx">
import { ElMessageBox } from 'element-plus';
import {

  updateUserPwd,
} from '@/api/system/user';
import useUserStore from '@/store/modules/user';

import { deepClone } from '@/utils';

const resetState = reactive<any>({
  show: false,
  row: {},
  rules: {
    // 请输入8-16位登录密码，必须包含（大小写字母、数字、特殊字符）
    password: [
      { required: true, message: '请输入登录密码', trigger: 'blur' },

      {
        pattern:
          /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[.\-_~!@#$^&*])[\w.\-~!@#$^&*]{8,16}$/,
        message: '请输入8-16位登录密码，必须包含大小写字母、数字及特殊字符。',
        trigger: 'blur',
      },
    ],

    // 确认密码
    passwordOk: [
      { required: true, message: '请输入确认密码', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (value !== resetState.row.password) {
            callback(new Error('两次输入密码不一致!'));
          }
          else {
            callback();
          }
        },
        trigger: 'blur',
      },
    ],

    // 确认密码
    passwordOld: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
  },
});
const { proxy } = getCurrentInstance();

const userStore = useUserStore();

// 首次登录

if (!userStore.userInfo.loginDate) {
  ElMessageBox.confirm('', {
    title: '提醒',
    message: () => {
      return (
        <div>
          <div>系统检测到当前账号为初次登录，</div>
          <div>请按要求设置密码后，再登录。</div>
        </div>
      );
    },
    type: 'warning',
    cancelButtonText: '关闭',
    confirmButtonText: '去设置',
  }).then((res) => {
    handleResetPwd(deepClone(userStore.userInfo));
  });
}

async function handleResetPwdSub() {
  const v = await proxy.$refs.ResetPwdRef.validate();
  if (v) {
    const data = await updateUserPwd(resetState.row.passwordOld, resetState.row.password);
    if (data) {
      proxy.$modal.msgSuccess('修改成功');
      resetState.show = false;
    }
  }
}
/** 重置密码按钮操作 */
function handleResetPwd(row) {
  resetState.show = true;
  resetState.row = deepClone(row);
  resetState.row.password = undefined;
  // proxy
  //   .$prompt('请输入"' + row.userName + '"的新密码', '提示', {
  //     confirmButtonText: '确定',
  //     cancelButtonText: '取消',
  //     closeOnClickModal: false,
  //     inputPattern: /^.{5,20}$/,
  //     inputErrorMessage: '用户密码长度必须介于 5 和 20 之间',
  //     inputValidator: (value) => {
  //       if (/<|>|"|'|\||\\/.test(value)) {
  //         return '不能包含非法字符：< > " \' \\\ |';
  //       }
  //     },
  //   })
  //   .then(({ value }) => {
  //     resetUserPwd(row.userId, value).then((response) => {
  //       proxy.$modal.msgSuccess('修改成功，新密码是：' + value);
  //     });
  //   })
  //   .catch(() => {});
}
</script>

<template>
  <div class="page-home">
    <div>{{ userStore?.userInfo?.nickName }}，您好！</div>
    <el-dialog v-model="resetState.show" title="修改密码" width="800" append-to-body>
      <el-form
        ref="ResetPwdRef"
        hide-required-asterisk
        :rules="resetState.rules"
        :model="resetState.row"
        label-width="120px"
        label-position="right"
      >
        <el-form-item prop="passwordOld" label="原密码:">
          <el-input
            v-model="resetState.row.passwordOld"
            style="width: calc(100% - 50px); margin-right: 10px"
            type="password"
            show-password
            clearable
            placeholder="请输入原密码"
          />
        </el-form-item>
        <el-form-item prop="password" label="新密码:">
          <el-input
            v-model="resetState.row.password"
            style="width: calc(100% - 50px); margin-right: 10px"
            show-password
            type="password"
            clearable
            placeholder="请输入8-16位登录密码，必须包含大小写字母、数字及特殊字符。"
          />

          <el-popover title="" :width="600" trigger="hover">
            <template #default>
              <div>
                <div>1、密码不可以包含3位相同或键盘中相邻连续字符，例:AAA、qaz都不符合要求。</div>
                <div>2、密码不应包含年份。</div>
                <div>3、密码至少包含数字、小写字母、大写字母、特殊字符，至少三种。</div>
                <div>4、特殊字符包含:._ ~!@#$^&*</div>
              </div>
            </template>
            <template #reference>
              <el-icon size="24px">
                <QuestionFilled />
              </el-icon>
            </template>
          </el-popover>
        </el-form-item>
        <el-form-item prop="passwordOk" label="确认密码:">
          <el-input
            v-model="resetState.row.passwordOk"
            style="width: calc(100% - 50px); margin-right: 10px"
            type="password"
            show-password
            clearable
            placeholder="请再次输入密码"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="resetState.show = false">
            取 消
          </el-button>
          <el-button type="primary" @click="handleResetPwdSub">
            提 交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.page-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 24px;
  font-weight: bold;
  line-height: 30px;
}
</style>
